<template>
	<view class="orderListItem" @click="$u.route(`/pages/order/orderDetail?orderId=${orderItem.orderId}`)">
		<view class="box-top">
			<view class="box-avatar">
				<Img :src="orderItem.storeLogo" :custom-style="{width:'84rpx',height:'84rpx'}" />
			</view>
			<view class="box-center">
				<view class="box-name">
					<text class="u-m-r-10">{{orderItem.storeName}}</text>
					<u-icon name="arrow-right" color="rgb(157,157,157)" size="24"></u-icon>
				</view>
				<view class="box-time">
					<text>{{orderItem.orderDate}}</text>
				</view>
			</view>
			<view class="box-status">
				<text>{{orderStatusName}}</text>
			</view>
		</view>
		<view class="box-buttom">
			<view class="box-imgs">
				<view class="imgWrapper" v-if="index < 3" v-for="(goodsItem,index) in orderItem.itemsList" :key="index">
					<Img :src="goodsItem.goodsImage" :custom-style="{width:'110rpx'}" />
				</view>
			</view>
			<view class="box-census">
				<view class="box-price">
					<text>￥{{orderItem.orderAmount}}</text>
				</view>
				<view class="box-quantity">
					共{{orderItem.itemsList.length}}件
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Img from "@/components/goods/img.vue"
	import { mapActions, mapState, mapMutations } from 'vuex';
	export default{
		components:{ Img },
		props:{
			orderItem:{
				type:Object,
				default:()=>{}
			}
		},
		computed: {
			...mapState({
				orderStatusList: state => state.shop.orderStatusList
			}),
			orderStatusName(){
				let orderStatusName = ''
				this.orderStatusList.forEach((item,index)=>{
					if(item.dictValue==this.orderItem.orderStatus){
						orderStatusName = item.dictName
					}
				})
				return orderStatusName
			}
		},
		mounted() {
			
		},
		methods:{
			async init(){
				// 获取配送方式字典
				this.ActGetAppDictList({
					dictType:'drug_relation',
					isCtr:'0'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderListItem{
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 24rpx 0;
		padding: 24rpx;
		.box-top{
			padding-top: 26rpx;
			display: flex;
			.box-avatar{
				width: 84rpx;
				height: 84rpx;
				border-radius: 8rpx;
				overflow: hidden;
			}
			.box-center{
				margin-right: auto;
				padding: 0 10px;
				.box-name{
					font-size: 28rpx;
					margin-bottom: 4rpx;
					color: $u-main-color;
					line-height: 40rpx;
				}
				.box-time{
					font-size: 24rpx;
					color: $u-tips-color;
					line-height: 32rpx;
				}
			}
			.box-status{
				font-size: 24rpx;
				color: #0D95FF;
			}
		}
		.box-buttom{
			height: 142rpx;
			background-color:#F6F6F6;
			display: flex;
			align-items: center;
			border-radius: 16rpx;
			padding: 16rpx;
			margin: 24rpx 0 0;
			.box-imgs{
				margin: 0 -16rpx;
				display: flex;
				.imgWrapper{
					height: 110rpx;
					margin-left:16rpx;
					border-radius:8rpx;
					overflow: hidden;
				}
			}
			.box-census{
				text-align: right;
				margin-left: auto;
				padding-right: 16rpx;
				.box-price{
					color: $u-type-error;
					font-weight: bold;
					font-size: 30rpx;
					text{
						padding-top: 8rpx;
					}
				}
				.box-quantity{
					color: $u-main-color;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
